<template>
	<view class="Content">
		<view class="MenuList">
			<!--  滑动视图 -->
			<uni-section title="列表test" type="line" padding>
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper class="swiper" :indicator-dots="true">
					<!-- item / 1 -->
					<swiper-item>
						<uni-grid :column="5" :highlight="true" @change="change" :showBorder="false">
							<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
								<view class="grid-item-box">
									<image :src="item.url" class="image" mode="aspectFill" />
									<text class="text">{{ item.text }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>

					<!-- item / 2 -->
					<swiper-item>
						<uni-grid :column="5" :highlight="true" @change="change" :showBorder="false">
							<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
								<view class="grid-item-box">
									<image :src="item.url" class="image" mode="aspectFill" />
									<text class="text">{{ item.text }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>

					<!-- item / 3 -->
					<swiper-item>
						<uni-grid :column="5" :highlight="true" @change="change" :showBorder="false">
							<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
								<view class="grid-item-box">
									<image :src="item.url" class="image" mode="aspectFill" />
									<text class="text">{{ item.text }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>

				</swiper>
			</uni-section>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				urlist: [{
						id: 1,
						name: this.text,
						url: '/Views/decisionSupport/DeanInquiry/DeanInquiry'
					},
					{
						id: 2,
						name: this.text,
						url: ''
					},
					{
						id: 3,
						name: this.text,
						url: '/Views/decisionSupport/decisionIndex'
					},
					{
						id: 4,
						name: this.text,
						url: ''
					},
					{
						id: 5,
						name: this.text,
						url: ''
					},
					{
						id: 6,
						name: this.text,
						url: ''
					},
					{
						id: 7,
						name: this.text,
						url: ''
					},
					{
						id: 8,
						name: this.text,
						url: ''
					},
					{
						id: 9,
						name: this.text,
						url: ''
					},
					{
						id: 10,
						name: this.text,
						url: ''
					},
				],
				list: [{
						url: '/static/logo/menulocation.png',
						text: '院长查询',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/logo/getinglocation.png',
						text: '检查',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/logo/VIP.png',
						text: '决策支持',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/logo/getinglocation.png',
						text: '接口',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/logo/vrcode.png',
						text: '检验'
					},
					{
						url: '/static/logo/coder.png',
						text: '门诊'
					},
					{
						url: '/static/logo/imgtest.jpg',
						text: '留观'
					},
					{
						url: '/static/logo/Nielogo.png',
						text: '手术'
					},
					{
						url: '/static/logo/messages.png',
						text: '设备'
					},
					{
						url: '/static/logo/VIP.png',
						text: '测试'
					}
				],
			};
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
				let currentext = this.list[index].text
				console.log(currentext + '=========' ,this.urlist[index].url);
				if( this.urlist[index].url == ''){
					uni.showToast({
						title: `${currentext},敬请期待~`,
						icon: 'none',
						  complete (res) {
						  // 页面显示完成后的回调函数
						  setTimeout(() => {
							console.log(res);
						  }, 1000)
						}
					})
				}else{
					uni.navigateTo({
					   url: this.urlist[index].url
					  }).then(() => {
						// 这里可以执行跳转后的操作
					  }).catch(() => {
						// 这里可以处理跳转失败的情况
					  },1000)
				}
			},



		},

	}
</script>

<style lang="scss">
	/* 滑动视图 */
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 10px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 4px 0;
	}

	::v-deep .uni-section-header {
		padding: 10px 0 0 10px !important;
	}

	::v-deep .uni-section-content {
		padding: 0 10px 0 10px !important;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 4px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		// height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			// height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>